<!-- 表情图标 -->
<!-- https://bj.96weixin.com/tools/emoji -->
<template>
	<view class="emoji">
		<view class="emoji-line" v-for="(line,i) in emoji" :key="i">
			<view class="emoji-line-item" v-for="(item,index) in line" :key="index" @click="clickEmoji(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const emoji = ref([
		['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆'],
		['😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙'],
		['😚', '☺️', '🙂', '🤗', '🤔', '😐', '😑', '😶'],
		['🙄', '😏', '😣', '😥', '😮', '🤐', '😯', '😪'],
		['😫', '😴', '😌', '😛', '😜', '😝', '🤤', '😒'],
		['😓', '😔', '😕', '😕', '🙃', '🤑', '😲', '☹'],
		['🙁', '😖', '😞', '😟', '😤', '😢', '😭', '😦']
	])
	
	const clickEmoji=(item)=>{
		uni.$emit('emotion',item);
	}
</script>

<style lang="scss" scoped>
.emoji{
	width: 100%;
	height: 460rpx;
	padding: 16rpx 10rpx 140rpx 10rpx;
	box-sizing: border-box;
	overflow: hidden;
	overflow-y: auto;
	.emoji-line{
		display: flex;
		.emoji-line-item{
			flex: 1;
			text-align: center;
			font-size: 40rpx;
			line-height: 68rpx;
		}
	}
}
</style>